.crop {
  width: 640px;
  .crop-wrapper {
    position: relative;

    overflow: hidden;
    &__image-original {
      width: auto;
      min-width: 100%;
      max-width: 100%;
      height: auto;

      user-select: none;
      transform: scale(1.03);
      pointer-events: none;

      filter: blur(10px) saturate(.2);
    }
    &__overlay {
      position: absolute;
      z-index: 999;
      top: 0;
      left: 0;

      overflow: hidden;

      box-sizing: content-box;

      cursor: move;

      border-radius: 50%;
      box-shadow: 0 0 0 3px white;
      img {
        position: absolute;

        display: block;
      }
    }
    &__scale {
      position: absolute;
      z-index: 1000;

      user-select: none;
      pointer-events: none;

      $scale-handler-size: 18px;
      &__handler {
        position: absolute;

        display: block;

        width: $scale-handler-size;
        height: $scale-handler-size;

        content: '';
        pointer-events: auto;

        border-radius: 50%;
        background-color: white;
        //box-shadow: inset 0 0 0 2px white;
        &:hover {
          background-color: $dark-sky-blue;
        }
        &--top {
          top: -($scale-handler-size/2) - 2;
          left: 50%;

          margin-left: -$scale-handler-size/2;

          cursor: ns-resize;
        }
        &--right {
          top: 50%;
          right: -($scale-handler-size/2) - 2;

          margin-top: -$scale-handler-size/2;

          cursor: ew-resize;
        }
        &--bottom {
          bottom: -($scale-handler-size/2) - 2;
          left: 50%;

          margin-left: -$scale-handler-size/2;

          cursor: ns-resize;
        }
        &--left {
          top: 50%;
          left: -($scale-handler-size/2) - 2;

          margin-top: -$scale-handler-size/2;

          cursor: ew-resize;
        }
      }
    }
  }

  .modal__footer {
    text-align: right;
    .button {
      margin-right: 8px;
    }
  }
}
